<template>
  <div class="m-get-code">
    <canvas id="canvas" :width="width" :height="height" title="看不清？点击重新获取" @click="getNewCode"></canvas>
  </div>
</template>

<script>
import { apiGetCode } from 'js/api'

export default {
  props: {
    width: {
      type: Number,
      default: 140
    },
    height: {
      type: Number,
      default: 50
    }
  },
  data() {
    return {
      code: ''
    }
  },
  mounted() {
    this.drawPic()
  },
  methods: {
    // 生成一个随机数
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    // 生成一个随机色
    randomColor(min, max) {
      var r = this.randomNum(min, max)
      var g = this.randomNum(min, max)
      var b = this.randomNum(min, max)
      return `rgb(${r}, ${g}, ${b})`
    },
    /**
     * 点击获取新的图片验证码
     */
    getNewCode(e) {
      e.preventDefault()
      this.drawPic()
    },
    /**
     * 绘制验证码图片
     * **/
    drawPic() {
      // 获取图片验证码
      apiGetCode().then(data => {
        this.code = data.data.code
        this.$emit('on-code', this.code)
        if (this.code) {
          var width = canvas.width
          var height = canvas.height
          var ctx = canvas.getContext('2d')
          ctx.textBaseline = 'bottom'
          /**
           * 绘制背景色
           * **/
          ctx.fillStyle = this.randomColor(180, 240) // 颜色若太深可能导致看不清
          ctx.fillRect(0, 0, width, height)
          // 绘制文字
          const str = this.code // 通过ajax获取动态验证码
          for (var i = 0; i < 4; i++) {
            // var txt = str[randomNum(0,str.length)];  // 随机生成验证码
            var txt = str.split('')[i]
            ctx.fillStyle = this.randomColor(60, 160) // 随机生成字体颜色
            const fontSize = this.randomNum(15, 40) // 随机生成字体大小
            if (fontSize < 14) {
              ctx.font = 20 + 'px Arial'
            } else {
              ctx.font = fontSize + 'px Arial'
            }
            var x = 10 + i * 25
            var y = this.randomNum(25, 45)
            var deg = this.randomNum(-45, 45)
            // 修改坐标原点和旋转角度
            ctx.translate(x, y)
            ctx.rotate(deg * Math.PI/180)
            ctx.fillText(txt, 0, 0)
            // 恢复坐标原点和旋转角度
            ctx.rotate(-deg * Math.PI/180)
            ctx.translate(-x, -y)
          }
          // 绘制干扰线 
          for (var i = 0; i < 5; i++) {
            ctx.strokeStyle = this.randomColor(40, 180)
            ctx.beginPath()
            ctx.moveTo(this.randomNum(0, width), this.randomNum(0, height))
            ctx.lineTo(this.randomNum(0, width), this.randomNum(0, height))
            ctx.stroke()
          }
          
          // 绘制干扰点 
          // for (var i = 0; i < 100; i++) {
          //   ctx.fillStyle = this.randomColor(0, 255)
          //   ctx.beginPath()
          //   ctx.arc(this.randomNum(0, width), this.randomNum(0, height), 1, 0, 2 * Math.PI)
          //   ctx.fill()
          // }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.m-get-code {
  cursor: pointer;
}
</style>
